<template>
  <div id="app">
    <!-- 
      父组件，
      1. 想要往子组件传参，添加标签属性传值
      2. 子组件props接收
     -->
     <h2>建国的黑店</h2>
    <!-- <my-product title='无敌猪肘子' price="199" desc="好吃极了" />
    <my-product title='爽口大西瓜' price="99" desc="忒甜了" />
    <my-product title='红烧大排骨' price="299" desc="贵死了" /> -->

    <!-- 加冒号和不加冒号的区别： 是否是动态绑定，动态绑定的意思就是使用的是data中的数据 -->
    <my-product v-for="item in list" :key="item.id"
        :title="item.title"
        :price="item.price"
        :desc="item.desc"
        :id="item.id"
        @cutPrice="handlePrice"
     />
    
  </div>
</template>

<script>
// import 组件对象 from '路径'
// ==> 组件对象 不是一个组件名，但是我们一般在这里命名的时候就和组件名写成一样
import MyProduct from './components/05.MyProduct'

export default {
  name: 'App',
  data(){
    return {
      list: [
        { id: 1, title: '无敌猪肘子', price: 188 ,desc:'美味极了'},
        { id: 2, title: '爽口大西瓜', price: 360, desc:'爽歪歪'},
        { id: 3, title: '美味大闸蟹', price: 42, desc:'泰裤辣'}
    ]
    }
  },
  methods:{
    handlePrice(price, id){
      console.log(`让id为${id}的商品价格砍${price}元素`)
      const good = this.list.find(el => el.id === id) // 找到要修改的那个对象
      // good.price -= price

      if (good.price - price < 10){
       return  alert('不能再砍了，砍骨折了')
      } else {
        good.price -= price
      }
    }
  },
  // 组件导入
  components:{
    // "组件名":组件对象
    // 组件名，=> 推荐大驼峰
    MyProduct
  }
}
</script>

